<template>
	<view>
		<view class="data-box">
			<!-- <view class="cu-bar bg-white">
				<view class="action data-box-title">
					<text class="cuIcon-titles"></text> 车辆检查
				</view>
			</view> -->
			<view class="form-block">
				<view class="card">
					<view class="card-body">
						<u--form
						class="from-card"
						labelPosition="left"
						labelWidth="130"
						:model="info"
						:rules="rules"
						ref="ruleForm">
							<u-form-item
							label="车牌号"
							prop="carNum"
							required
							@click="pickShow = true;columns = carNumbers;pickField = 'carId';pickFieldName='carNum'"
							borderBottom>
								<u--input
								disabled
								disabledColor="#ffffff"
								suffixIcon="arrow-right"
								v-model="info.carNum"
								placeholder="请选择"
								inputAlign="right"
								border="none">
								</u--input>
							</u-form-item>
							<!-- <u-form-item
							label="检查日期"
							prop="useTime"
							required
							borderBottom>
								<u--input
								disabled
								disabledColor="#ffffff"
								suffixIcon="arrow-right"
								placeholder="请选择"
								v-model="info.checkTime"
								inputAlign="right"
								border="none">
								</u--input>
							</u-form-item> -->
							<u-form-item label="检查人" prop="userName" required borderBottom>
								<u--input
								disabled
								disabledColor="#ffffff"
								v-model="info.userName"
								placeholder="请输入"
								inputAlign="right"
								border="none"
								></u--input>
							</u-form-item>
							<u-form-item label="外观是否正常" prop="appearance" required borderBottom>
								<u-radio-group
								v-model="info.appearance"
								iconPlacement="left"
								shape="square">
									<u-radio
									:customStyle="{marginLeft: '40rpx'}"
									v-for="(item, index) in whether"
									:key="index"
									:label="item.name"
									:name="item.name"
									@change="radioChange">
									</u-radio>
								</u-radio-group>
							</u-form-item>
							<u-form-item label="内饰环境是否正常" prop="interior" required borderBottom>
								<u-radio-group
								v-model="info.interior"
								iconPlacement="left"
								shape="square">
									<u-radio
									:customStyle="{marginLeft: '40rpx'}"
									v-for="(item, index) in whether"
									:key="index"
									:label="item.name"
									:name="item.name"
									@change="radioChange">
									</u-radio>
								</u-radio-group>
							</u-form-item>
							<u-form-item label="油表是否正常" prop="oilGauge" required borderBottom>
								<u-radio-group
								v-model="info.oilGauge"
								iconPlacement="left"
								shape="square">
									<u-radio
									:customStyle="{marginLeft: '40rpx'}"
									v-for="(item, index) in whether"
									:key="index"
									:label="item.name"
									:name="item.name"
									@change="radioChange">
									</u-radio>
								</u-radio-group>
							</u-form-item>
							<u-form-item label="备注" prop="remark" borderBottom labelWidth="80">
								<u--textarea
								v-model="info.remark"
								placeholder="请输入内容" >
								</u--textarea>
							</u-form-item>
						</u--form>
					</view>
				</view>
			</view>
			<uni-group>
				<u--form
				class="from-card"
				labelPosition="top"
				labelWidth="180">
					<u-form-item label="图片">
						<u-upload
							:fileList="imageList"
							@afterRead="afterRead($event,'imageList')"
							@delete="deletePic($event,'imageList')"
							:multiple="true"
							:maxCount="9">
						</u-upload>
					</u-form-item>
				</u--form>
			</uni-group>
		</view>
		
		<view class="submit-button">
			<view class="submit-block" @click="submit()">
				提交
			</view>
		</view>
	
		<u-picker
			:immediateChange="true"
			:show="pickShow"
			:columns="columns"
			@confirm="confirmPick"
			keyName="name"
			@cancel="pickShow = false">
		</u-picker>
	</view>
</template>

<script>
	import { getCarNums } from '@/api/car.js'
	import { getNowTime } from '@/utils/dkTools.js'
	import { uploadFile,removeByOssId } from '@/api/upload'
	import { checkCarAdd } from '@/api/checkCar'
	export default {
		data() {
			return {
				info:{},
				rules:{
					'carNum': {
						required: true,
						message: '请选择车牌号',
						trigger: ['blur', 'change']
					},
					'appearance': {
						type: 'string',
						required: true,
						message: '请选择外观是否正常',
						trigger: ['blur', 'change']
					},
					'interior': {
						type: 'string',
						required: true,
						message: '请选择内饰环境是否正常',
						trigger: ['blur', 'change']
					},
					'oilGauge': {
						type: 'string',
						required: true,
						message: '请选择油表是否正常',
						trigger: ['blur', 'change']
					},
				},
				pickShow: false,
				columns: [],
				carNumbers: [],
				pickField: '',
				pickFieldName: '',
				whether: [
					{ name:'是' },
					{ name:'否' },
				],
				imageList: [],
				buttonDisabled: false,
				toTabIndex: 1
			}
		},
		onLoad() {
			let loginInfo = uni.getStorageSync("loginInfo")
			this.info.userName = loginInfo.user.userName
			this.getCarNumList()
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.ruleForm.setRules(this.rules)
		},
		methods: {
			async getCarNumList(){
				const { data } = await getCarNums();
				if(data.code == 200){
					this.carNumbers = [data.data]
				}
			},
			radioChange(){
				
			},
			confirmPick(e){
				this.pickShow = false
				this.info[this.pickField] = e.value[0].id
				this.info[this.pickFieldName] = e.value[0].name
			},
			// 读取图片后事件
			afterRead(list,name) {
				list.file.forEach(e=>{
					this.uploadImage(e,name)
				})
			},
			async uploadImage(e,name){
				const result = await uploadFile(e.url)
				this[name].push(result)
			},
			// 删除图片后事件
			async deletePic(e,name) {
				let ossIds = []
				ossIds.push(this[name][e.index].ossId)
				const result = await removeByOssId(ossIds);
				this[name].splice(e.index, 1)
			},
			submit(){
				if(this.buttonDisabled){
					uni.$u.toast('请勿重复提交')
					return
				}
				this.$refs.ruleForm.validate().then(res => {
					this.buttonDisabled = true
					this.info.images = this.imageList.map(e=>e.url).join(',')
					this.addCheckCar()
				}).catch(errors => {
					uni.$u.toast('请将信息填写完整')
				})
			},
			async addCheckCar(){
				const { data } = await checkCarAdd(this.info);
				if(data.code == 200){
					uni.showToast({ title: '提交成功', icon: 'none' })
					// let pages = getCurrentPages();
					// let prevPage = pages[pages.length - 2];
					setTimeout(() => {
						// prevPage.$vm.getTabIndex(1);
						uni.navigateBack()
					}, 500)
				}else{
					uni.showToast({ title: data.msg, icon: 'none' })
				}
			},
		}
	}
</script>

<style>
page{
	background-color: #f6f6f6;
	color: #333333;
}
</style>
